<template>
	<view class="Box">
		<view class="classItem">
			<image :src="contentData.venueMedias[0].img" class="itemImg" mode=""></image>
			<view class="itemRight">
				<view class="itemName">
					{{ contentData.name }}
				</view>
				<view class="itemPriceRange">
					<u-icon name="map-fill"></u-icon>
					<view style="margin-left:10rpx">
						{{ contentData.location }}起
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in classList" :key="index" class="">
			<view class="classItemTrue" @click="classClick(item.id)">
				<image :src="item.courseCover" class="itemImg" mode=""></image>
				<view class="itemRight">
					<view class="itemName">
						{{ item.courseName }}
					</view>
					<view class="itemPriceRange">
						<view style="color: red;">
							￥
						</view>
						<view class="">
							{{ item.priceRange }}起
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		venueDetail,
		queryCourseList
	} from "@/api/challenge";

	export default {
		data() {
			return {
				contentData: {},
				classList: [],
				venueId:""
			}
		},
		onLoad(data) {
			this.venueId = data.id
			venueDetail({
				venueId: data.id
			}).then(res => {
				this.contentData = res
			})

			queryCourseList(data.id, 1, 100, {
				status: 0
			}).then(res => {
				// console.log('课程', res);
				this.classList = res.records
			})
		},
		methods: {
			classClick(item) {
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/curriculumDetails/curriculumDetails?id=' + item + "&venueId=" + this.venueId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Box {
		width: 100%;
		min-height: 100vh;
		background-color: #f2f2f2;
	}

	.classItem {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		align-items: center;

		.itemImg {
			width: 160rpx;
			height: 160rpx;
		}

		.itemRight {
			flex: 1;
			margin: 6rpx 0 6rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.itemName {
				font-weight: 700;
			}

			.itemPriceRange {
				display: flex;
			}
		}
	}

	.classItemTrue {
		display: flex;
		padding: 20rpx;
		box-shadow: 0pt 1px 6px -1px rgba(0, 0, 0, 0.24);
		margin: 20rpx;

		.itemImg {
			width: 160rpx;
			height: 160rpx;
		}

		.itemRight {
			margin-left: 20rpx;

			.itemName {
				font-weight: 700;
			}

			.itemPriceRange {
				display: flex;
				margin-top: 50rpx;
			}
		}
	}
</style>